<template>
  <div class="wrapper">
    <swiper :options="swiperOption" v-if="ShowSwiper">
    <swiper-slide v-for="item of list" :key="item.id"><img class="swiper-img" :src="item.imgUrl" alt=""></swiper-slide>

    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  </div>
</template>
<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      }
    }
  },
  props: {
    list: Array
  },
  computed: {
    // 利用计算属性，拿到ajax数据后才加载轮播图
    ShowSwiper () {
      return this.list.length
    }
  }
}
</script>
<style lang="stylus" scoped>
// 样式穿透
.wrapper>>>.swiper-pagination-bullet-active
     background: #fff
.wrapper
     overflow: hidden
     width :100%
     height: 0
     padding-bottom: 25.6%
     background: #eee
     //  图片的宽除以高获得百分比
    // 380/640=0.6
    .swiper-img
     width :100%

</style>
